<template>
  <!-- gpt3 -->
  <div class="statistic-card">
    <el-statistic :value="total_tokens">
      <template #title>
        <div style="display: inline-flex; align-items: center; font-size: 16px;">
          GPT3 Question Times
          <el-tooltip effect="dark" content="150TimesPerDay" placement="top">
            <el-icon style="margin-left: 4px" :size="16">
              <Warning />
            </el-icon>
          </el-tooltip>
        </div>
      </template>
    </el-statistic>
    <div class="statistic-footer">
      <div class="footer-item">
        <span>than last day</span>
        <span class="green">
          {{ rate }}%
          <el-icon>
            <CaretTop />
          </el-icon>
        </span>
      </div>
    </div>
  </div>

  <!-- gpt4 -->
  <div class="statistic-card">
    <el-statistic :value="total_tokens_GPT4">
      <template #title>
        <div style="display: inline-flex; align-items: center; font-size: 16px;">
          GPT4 Question Times
          <el-tooltip effect="dark" content="10TimesPerDay" placement="top">
            <el-icon style="margin-left: 4px" :size="16">
              <Warning />
            </el-icon>
          </el-tooltip>
        </div>
      </template>
    </el-statistic>
    <div class="statistic-footer">
      <div class="footer-item">
        <span>than last day</span>
        <span class="green">
          {{ rateGPT4 }}%
          <el-icon>
            <CaretTop />
          </el-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch, ref, onMounted } from "vue";
import { storeToRefs } from "pinia";
import pinia from "../../store";
import { userStore } from "../../store/user";

const user = userStore(pinia);
const { total_tokens, old_tokens, total_tokens_GPT4, old_tokens_GPT4 } = storeToRefs(user);
const rate = ref(0);
const rateGPT4 = ref(0)
onMounted(() => {
  if (old_tokens.value == 0) {
    rate.value = ((total_tokens.value - old_tokens.value) / (old_tokens.value + 1) * 100).toFixed(2);
  } else {
    rate.value = ((total_tokens.value - old_tokens.value) / old_tokens.value * 100).toFixed(2);
  }
  if (old_tokens_GPT4.value == 0) {
    rateGPT4.value = ((total_tokens_GPT4.value - old_tokens_GPT4.value) / (old_tokens_GPT4.value + 1) * 100).toFixed(2);
  } else {
    rateGPT4.value = ((total_tokens_GPT4.value - old_tokens_GPT4.value) / old_tokens_GPT4.value * 100).toFixed(2);
  }
  if (rate.value == "Infinity") rate.value = 0;
  if (rateGPT4.value == "Infinity") rateGPT4.value = 0;
})


watch(total_tokens, (newVal) => {
  if (old_tokens.value == 0) {
    rate.value = ((newVal - old_tokens.value) / (old_tokens.value + 1) * 100).toFixed(2);
  } else {
    rate.value = ((newVal - old_tokens.value) / old_tokens.value * 100).toFixed(2);
  }
  if (rate.value == "Infinity") rate.value = 0;
});


watch(total_tokens_GPT4, (newVal) => {
  if (old_tokens_GPT4.value == 0) {
    rateGPT4.value = ((newVal - old_tokens_GPT4.value) / (old_tokens_GPT4.value + 1) * 100).toFixed(2);
  } else {
    rateGPT4.value = ((newVal - old_tokens_GPT4.value) / old_tokens_GPT4.value * 100).toFixed(2);
  }
  if (rateGPT4.value == "Infinity") rateGPT4.value = 0;
});
</script>

<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
  --el-statistic-title-color: white;
  --el-statistic-content-color: white;
}

.statistic-card {
  height: max-content;
  width: max-content;
  padding: 20px;
  background-color: black;
  color: red;
  border-radius: 10px;
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 16px;
  color: white;
  margin-top: 5px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}
</style>
